import React, { useState } from 'react'
import { DeleteOutlined } from '@ant-design/icons';
// 定义数据项的接口
// Item 接口定义了搜索项的数据结构，包括 id 和 name
interface Item {
    id: number;
    name: string;
}

// 定义组件的属性类型
// SearchComponentProps 接口定义了组件的属性，包括一个 items 数组
interface SearchComponentProps {
    id: number;
    items: Item[];
}
const Index: React.FC<SearchComponentProps> = ({ items }) => {
    // tab切换
    // isOpen: 控制搜索框的显示与隐藏。
    const [isOpen, setIsOpen] = useState(false);
    // activeTab: 控制当前显示的标签页
    const [activeTab, setActiveTab] = useState('tab1');
    // 点击输入框的时候弹框打开
    const handelDown = () => setIsOpen(!isOpen);
    // handleTabChange: 切换当前选中的标签页，通过更新 activeTab 状态
    const handleTabChange = (tab: string) => setActiveTab(tab);

    /**********************************************************************************************************/
    // 搜索功能
    // searchTerm: 保存当前搜索框中的文本
    const [searchTerm, setSearchTerm] = useState<string>('');
    // filteredItems: 保存符合搜索条件的过滤后结果
    const [filteredItems, setFilteredItems] = useState<Item[]>([]);
    // 定义 handleChange 函数处理输入框的变化事件，更新 searchTerm 状态，并调用 filterItems 函数来过滤数据。
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const term = event.target.value;
        setSearchTerm(term);
        filterItems(term);
    };
    // filterItems 函数根据 searchTerm 过滤 items 数组，找到所有名称中包含 searchTerm 的项。如果 searchTerm 为空，则清空 filteredItems
    const filterItems = (term: string) => {
        if (term.trim() === '') {
            setFilteredItems([]);
            return;
        }
        // 在 return 语句中，条件渲染决定了是否显示搜索结果。当 searchTerm 不为空且 filteredItems 中有结果时，显示一个 <ul> 列表，列出所有匹配的项。
        const lowerTerm = term.toLowerCase();
        const filtered = items.filter(item =>
            item.name.toLowerCase().includes(lowerTerm)
        );
        setFilteredItems(filtered);
    };
    return (
        <div>
            <div className="search">
                <input type="text" placeholder='2个及以上关键词描述你想要的设计' value={searchTerm}
                    onChange={handleChange} onClick={handelDown} />
                {
                    isOpen && (
                        <div className="dropdown">
                            <div className="tabs">
                                <button onClick={() => handleTabChange('tab1')} className={activeTab === 'tab1' ? 'active' : ''}>模版</button>
                                <button onClick={() => handleTabChange('tab2')} className={activeTab === 'tab2' ? 'active' : ''}>素材</button>
                                <button onClick={() => handleTabChange('tab3')} className={activeTab === 'tab3' ? 'active' : ''}>我的设计</button>
                            </div>
                            <div className="content">
                                {activeTab === 'tab1' && <div className='ConSearch'>
                                    <div className='tab1One'>
                                        {/* 搜索数据 */}
                                        <div><p>历史搜索</p><p><DeleteOutlined /></p></div>
                                        {searchTerm && filteredItems.length > 0 && (
                                            <ul>
                                                {filteredItems.map(item => (
                                                    <li key={item.id}>{item.name}</li>
                                                ))}
                                            </ul>
                                        )}
                                    </div>
                                    <div className="tab1Two">
                                        <div><p>热门搜索</p></div>
                                        <div className='conRM'>
                                            <ul>
                                                <li><p className='p1'>1</p>国庆</li>
                                                <li><p className='p2'>2</p>旅游</li>
                                                <li><p className='p3'>3</p>店铺</li>
                                                <li><p className='p4'>4</p>台风</li>
                                                <li><p className='p5'>5</p>简历</li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>}
                                {/* tab切换 */}
                                {activeTab === 'tab2' && <div className='ConSearch'>
                                    <div className='tab1One'>
                                        <div><p>历史搜索</p><p><DeleteOutlined /></p></div>
                                        <div></div>
                                    </div>
                                    <div className="tab1Two">
                                        <div><p>热门搜索</p></div>
                                        <div className='conRM'>
                                            <ul>
                                                <li><p className='p1'>1</p>日历</li>
                                                <li><p className='p2'>2</p>节日</li>
                                                <li><p className='p3'>3</p>国庆</li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>}
                                {activeTab === 'tab3' && <div className='ConSearch'>
                                    <div className='tab1One'>
                                        <div><p>历史搜索</p><p><DeleteOutlined /></p></div>
                                        <div></div>
                                    </div>
                                    <div className="tab1Two">
                                        <div><p>热门搜索</p></div>
                                        <div className='conRM'>
                                            <ul>
                                                <li><p className='p1'>1</p>中秋</li>
                                                <li><p className='p2'>2</p>中秋节</li>
                                                <li><p className='p3'>3</p>国庆</li>
                                                <li><p className='p4'>4</p>台风</li>
                                                <li><p className='p5'>5</p>简历</li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>}
                            </div>
                        </div>
                    )
                }
                <button className='SearchBtn' >搜索</button>
            </div>
            <div className="DesignNav">
                <span>你可能想找:</span>
                <a href="#">中秋</a>
                <a href="#">小红书</a>
                <a href="#">简历</a>
                <a href="#">免费</a>
                <a href="#">招聘</a>
            </div>
        </div>

    )
}

export default Index